<template>
  <CommonSelect :label="label" :name="name" v-model="currentValue" :columns="options" :required="required" />
</template>

<script>
import CommonSelect from './CommonSelect'
import api from '@/api'

export default {
  components: {
    CommonSelect,
  },
  props: {
    value: {
      type: [Number, String, Array],
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    required: {
      type: Boolean,
    },
  },
  data () {
    return {
      currentValue: '',
      options: [],
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.currentValue = this.value
      },
    },
    currentValue () {
      this.$emit('input', this.currentValue)
    },
  },
  async created () {
    const { result } = await api.getDict(({
      type: this.type,
    }))
    result.forEach(item => { item.value = item.id })
    this.options = result
  },
}
</script>
